<template>
  <div v-show="visible" class="full-container">
    <component v-if="id && showDetail" ref="refCrmFullScreenDetail"
               v-bind="$attrs"
               :is="tabName"
               :crm-type="crmType"
               :id="id"
               class="d-view"
               @handle="detailHandle"
               @hide-view="hiddenView"/>
  </div>
</template>


<script setup>
import {getMaxIndex} from '/src/utils/index.js'
import LeadsDetail from '/src/views/crm/leads/Detail.vue'
import CustomerDetail from '/src/views/crm/customer/Detail.vue'
import ContactsDetail from '/src/views/crm/contacts/Detail.vue'
import BusinessDetail from '/src/views/crm/business/Detail.vue'
import ContractDetail from '/src/views/crm/contract/Detail.vue'
import ProductDetail from '/src/views/crm/product/Detail.vue'
import ReceivablesDetail from '/src/views/crm/receivables/Detail.vue'
import ReceivablesPlanDetail from '/src/views/crm/receivablesPlan/Detail.vue'
import ExamineDetail from '/src/views/oa/examine/components/ExamineDetail.vue'
import TaskDetail from '/src/views/taskExamine/task/components/TaskDetail.vue'
import LogDetail from '/src/views/new/workLog/components/LogDetail.vue'
import NoticeDetail from '/src/views/oa/notice/NoticeDetail.vue'
import VisitDetail from '/src/views/crm/visit/Detail.vue'
import InvoiceDetail from '/src/views/crm/invoice/Detail.vue'


import {computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, watch} from "vue";

defineOptions({
  name: 'CRMFullScreenDetail', // 客户管理下 重要提醒 回款计划提醒
})

const props = defineProps({
  /** 模块ID */
  id: [String, Number],
  /** 没有值就是全部类型 有值就是当个类型 */
  crmType: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['handle','update:visible'])

const showDetail = ref(false)

const refCrmFullScreenDetail = ref();

const tabName = computed(() => {
  console.log("crmType", props.crmType)
  if (props.crmType == 'leads') {
    return LeadsDetail
  } else if (props.crmType == 'customer') {
    return CustomerDetail
  } else if (props.crmType == 'contacts') {
    return ContactsDetail
  } else if (props.crmType == 'business') {
    return BusinessDetail
  } else if (props.crmType == 'contract') {
    return ContractDetail
  } else if (props.crmType == 'product') {
    return ProductDetail
  } else if (props.crmType == 'receivables') {
    return ReceivablesDetail
  } else if (props.crmType == 'receivablesPlan') {
    return ReceivablesPlanDetail
  } else if (props.crmType == 'examine') {
    return ExamineDetail
  } else if (props.crmType == 'task') {
    return TaskDetail
  } else if (props.crmType == 'log') {
    return LogDetail
  } else if (props.crmType == 'announcement') {
    return NoticeDetail
  } else if (props.crmType == 'visit') {
    return VisitDetail
  } else if (props.crmType == 'invoice') {
    return InvoiceDetail
  }
  return ''
})


watch(() => props.visible, (val) => {
  console.log("refCrmFullScreenDetail val",val)
  showDetail.value = val
  if (val) {
    // document.body.appendChild(this.$el)
    // this.$el.style.zIndex = getMaxIndex()
    document.body.appendChild(refCrmFullScreenDetail.value)
    refCrmFullScreenDetail.value.style.zIndex = getMaxIndex()
  }
})
watch(showDetail, (val) => {
  if (!val) {
    setTimeout(() => {
      emits('update:visible', false)
    }, 350)
  }
})

onMounted(() => {
  if (props.visible) {
    // document.body.appendChild(this.$el)
    // this.$el.style.zIndex = getMaxIndex()
    console.log("refCrmFullScreenDetail", refCrmFullScreenDetail)
    document.body.appendChild(refCrmFullScreenDetail.value)
    refCrmFullScreenDetail.value.style.zIndex = getMaxIndex()
  }
})

onBeforeUnmount(() => {
  console.log("refCrmFullScreenDetail onBeforeUnmount")
  console.log("refCrmFullScreenDetail onBeforeUnmount", refCrmFullScreenDetail)
  // remove DOM node after destroy
  // if (this.$el && this.$el.parentNode) {
  //   this.$el.parentNode.removeChild(this.$el)
  // }
  if (refCrmFullScreenDetail && refCrmFullScreenDetail.value && refCrmFullScreenDetail.value.parent) {
    refCrmFullScreenDetail.value.parent.removeChild(refCrmFullScreenDetail)
  }
})

function hiddenView() {
  showDetail.value = false
}


/**
 * 详情操作
 */
function detailHandle(data) {
  if (data.type === 'alloc' || data.type === 'get' || data.type === 'transfer' || data.type === 'transform' || data.type === 'delete' || data.type === 'put_seas') {
    showDetail.value = false
  }
  emits('handle', data)
}
</script>

<style lang="scss" scoped>
.full-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.d-view {
  position: fixed;
  min-width: 950px;
  width: 75%;
  top: 0px;
  bottom: 0px;
  right: 0px;
}
</style>
